<div class="content__title">
    <h1>
        Tables
        <small>Native support</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Basic">
            <nz-table [nzDataSource]="data" [nzPageSize]="10">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age</span></th>
                        <th nz-th><span>Address</span></th>
                        <th nz-th><span>Action</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of data">
                        <td nz-td>{{data.name}}</td>
                        <td nz-td>{{data.age}}</td>
                        <td nz-td>{{data.address}}</td>
                        <td nz-td>
                            <span>
                                <a>Action</a>
                                <span nz-table-divider></span>
                                <a>Delete</a>
                                <span nz-table-divider></span>
                                <nz-dropdown>
                                    <a class="ant-dropdown-link" nz-dropdown>
                                        More<i class="anticon anticon-down"></i>
                                    </a>
                                    <ul nz-menu>
                                        <li nz-menu-item>1st menu item</li>
                                        <li nz-menu-item>2st menu item</li>
                                        <li nz-menu-item>3st menu item</li>
                                    </ul>
                                </nz-dropdown>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Sort">
            <nz-table [nzDataSource]="data" [nzPageSize]="10">
                <thead nz-thead>
                    <tr>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age<nz-table-sort [(nzValue)]="ageSort" (nzValueChange)="ageSortChange($event)"></nz-table-sort></span></th>
                        <th nz-th><span>Address</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of data">
                        <td nz-td>{{data.name}}</td>
                        <td nz-td>{{data.age}}</td>
                        <td nz-td>{{data.address}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Selection">
            <nz-table [nzDataSource]="data" [nzPageSize]="10" (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="_refreshStatus()" (nzPageSizeChange)="_refreshStatus()">
                <thead nz-thead>
                    <tr>
                        <th nz-th [nzCheckbox]="true">
                            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                            </label>
                        </th>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age</span></th>
                        <th nz-th><span>Address</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of data">
                        <td nz-td [nzCheckbox]="true">
                            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
                            </label>
                        </td>
                        <td nz-td>{{data.name}}</td>
                        <td nz-td>{{data.age}}</td>
                        <td nz-td>{{data.address}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card nzTitle="Ajax">
            <nz-table #nzTable2
                [nzAjaxData]="_ajaxDataSet"
                [nzShowSizeChanger]="true"
                [nzLoading]="_ajaxLoading"
                [nzTotal]="_total"
                [(nzPageIndex)]="_current"
                (nzPageIndexChange)="_ajaxRefreshData()"
                [(nzPageSize)]="_pageSize"
                (nzPageSizeChange)="_ajaxRefreshData()">
                <thead nz-thead>
                <tr>
                    <th nz-th><span>Name</span></th>
                    <th nz-th><span>Age</span></th>
                    <th nz-th><span>Email</span></th>
                </tr>
                </thead>
                <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let i of nzTable2.data">
                    <td nz-td>
                        <a>{{i.name.first}} {{i.name.last}}</a>
                    </td>
                    <td nz-td>{{i.gender}}</td>
                    <td nz-td>{{i.email}}</td>
                </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Dynamic Settings">
            <form nz-form [nzLayout]="'inline'" class="mb-sm">
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Bordered</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_bordered" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Loading</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_loading" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Pagination</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_pagination" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Title</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_title" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Column Header</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_header" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Footer</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_footer" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>Size</label>
                    </div>
                    <div nz-form-control>
                        <nz-radio-group [(ngModel)]="_size" [ngModelOptions]="{standalone: true}">
                            <label nz-radio-button [nzValue]="'default'">
                                <span>Default</span>
                            </label>
                            <label nz-radio-button [nzValue]="'middle'">
                                <span>Middle</span>
                            </label>
                            <label nz-radio-button [nzValue]="'small'">
                                <span>Small</span>
                            </label>
                        </nz-radio-group>
                    </div>
                </div>
                <div nz-row nz-form-item>
                    <div nz-form-label>
                        <label>No Result</label>
                    </div>
                    <div nz-form-control>
                        <nz-switch [(ngModel)]="_noresult" (ngModelChange)="_toggleData()" [ngModelOptions]="{standalone: true}"></nz-switch>
                    </div>
                </div>
            </form>
            <nz-table
                #nzTable
                [nzDataSource]="_dataSet"
                [nzPageSize]="10"
                [nzBordered]="_bordered"
                [nzLoading]="_loading"
                [nzIsPagination]="_pagination"
                [nzShowFooter]="_footer"
                [nzShowTitle]="_title"
                [nzSize]="_size">
                <span nz-table-title>Here is Title</span>
                <thead nz-thead *ngIf="_header">
                    <tr>
                        <th nz-th><span>Name</span></th>
                        <th nz-th><span>Age</span></th>
                        <th nz-th><span>Address</span></th>
                        <th nz-th><span>Action</span></th>
                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                        <td nz-td>{{data.name}}</td>
                        <td nz-td>{{data.age}}</td>
                        <td nz-td>{{data.address}}</td>
                        <td nz-td>
                            <span>
                                <a>Action 一 {{data.name}}</a>
                                <span nz-table-divider></span>
                                <nz-popconfirm [nzTitle]="'Are you sure？'" [nzOkText]="'ok'" [nzCancelText]="'cancel'" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">
                                    <a nz-popconfirm>Delete</a>
                                </nz-popconfirm>
                                <span nz-table-divider></span>
                                <nz-dropdown>
                                    <a class="ant-dropdown-link" nz-dropdown>
                                        More actions <i class="anticon anticon-down"></i>
                                    </a>
                                    <ul nz-menu>
                                        <li nz-menu-item>1st menu item</li>
                                        <li nz-menu-item>2st menu item</li>
                                        <li nz-menu-item>3st menu item</li>
                                    </ul>
                                </nz-dropdown>
                            </span>
                        </td>
                    </tr>
                </tbody>
                <span nz-table-footer>Here is footer</span>
            </nz-table>
        </nz-card>
    </div>
</div>
